<template>
  <div class="line-plan-layout">
    <div class="search">
      <i class="icon-change" @click="changeVal"></i>
      <div class="search-inp clearfix">
        <span class="txt fl">起点：</span>
        <input type="search"
               v-model="params.originVal.txt"
               class="inp fl bottom"
               placeholder="请输入起点"
               @input="originInp">
      </div>
      <div class="search-inp clearfix">
        <span class="txt fl">终点：</span>
        <input type="search"
               v-model="params.terminalVal.txt"
               class="inp fl"
               placeholder="请输入终点"
               @input="terminalInp">
      </div>
    </div>
    <div class="search-list">
      <h2 class="title" v-show="history&&historyVal.length>0">历史记录</h2>
      <ul class="history" v-show="history">
        <li v-for="(item,index) in historyVal" @click="toPlan(item)">
          <i class="fa fa-search searchs" aria-hidden="true"></i>
          <span class="start">{{item.originVal.txt}}</span>
          <i class="fa fa-long-arrow-right arrow" aria-hidden="true"></i>
          <span class="end">{{item.terminalVal.txt}}</span>
        </li>
      </ul>
      <ul class="inp" v-show="!history">
        <li v-for="(item,index) in searchVal" @click="toVal(item)">
          <i class="fa fa-clock-o clock" aria-hidden="true"></i>
          <span class="search-state">{{item.name}}</span>
        </li>
      </ul>
      <p class="clear-history" v-show="history&&historyVal.length>0" @click="clearHistory">清空搜索记录</p>
    </div>
    <div class="bus-tool">
      <vBanner></vBanner>
    </div>
  </div>
</template>
<script>
  import vBanner from '../../components/banner/banner.vue'
  import {showToast, getLocation, getPlace, setPlanHistory} from '../../utils/public'

  export default {
    data() {
      return {
        history: true,
        params: {
          type: 1,
          originVal: {txt: '', location: []},
          terminalVal: {txt: '', location: []}
        },
        searchVal: [],
        historyVal: []
      }
    },
    components: {vBanner},
    mounted() {
      this.onReady()
    },
    methods: {
      onReady() {
        let historyVal = JSON.parse(localStorage.getItem('historyVal'))
        if (historyVal) {
          this.historyVal = historyVal
        }
        // 获取我的位置
        getLocation((Lng, Lat) => {
          if (Lat && Lng) {
            this.params.originVal = {
              txt: '我的位置',
              location: [Lng, Lat]
            }
            this.historyVal.forEach((v, i) => {
              if (v.originVal.txt === '我的位置') {
                v.originVal.location = [Lng, Lat]
              }
              if (v.terminalVal.txt === '我的位置') {
                v.terminalVal.location = [Lng, Lat]
              }
            })
          } else {
            showToast('定位失败，暂时无法获取所在位置！')
          }
        })
      },
      originInp() {
        this.params.originVal.location = []
        getPlace(this.params.originVal.txt, (data) => {
          this.params.type = 1
          this.history = false
          this.searchVal = data
        })
      },
      terminalInp() {
        this.params.terminalVal.location = []
        getPlace(this.params.terminalVal.txt, (data) => {
          this.params.type = 2
          this.history = false
          this.searchVal = data
        })
      },
      toVal(item) {
        this.history = true
        if (this.params.type === 1) {
          this.params.originVal = {
            txt: item.name,
            location: [item.location.lng, item.location.lat]
          }
        } else if (this.params.type === 2) {
          this.params.terminalVal = {
            txt: item.name,
            location: [item.location.lng, item.location.lat]
          }
        }
      },
      changeVal() {
        let origin = {}
        origin.txt = this.params.originVal.txt
        origin.location = this.params.originVal.location
        let terminal = {}
        terminal.txt = this.params.terminalVal.txt
        terminal.location = this.params.terminalVal.location
        this.params.originVal = terminal
        this.params.terminalVal = origin
      },
      toPlan(item) {
        localStorage.setItem('planSelect', JSON.stringify(item))
        this.$router.push({path: '/planSelect'})
      },
      clearHistory() {
        this.historyVal = []
        localStorage.removeItem('historyVal')
      }
    },
    computed: {
      oVal() {
        return this.params.originVal.location
      },
      tVal() {
        return this.params.terminalVal.location
      }
    },
    watch: {
      oVal: function (nVal, oVal) {
        if (this.params.originVal.location.length === 2 && this.params.terminalVal.location.length === 2) {
          localStorage.setItem('planSelect', JSON.stringify(this.params))
          setPlanHistory(this.params)
          this.$router.push({path: '/planSelect'})
        }
      },
      tVal: function (nVal, oVal) {
        if (this.params.originVal.location.length === 2 && this.params.terminalVal.location.length === 2) {
          localStorage.setItem('planSelect', JSON.stringify(this.params))
          setPlanHistory(this.params)
          this.$router.push({path: '/planSelect'})
        }
      }
    }
  }
</script>
<style scoped>
  @import "../../assets/css/linePlan.css";
</style>
